﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket Chat</title>
</head>

<body>

    <script type="text/javascript">
        var socket;
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        function connect() {
            if (document.getElementById('btnconn').value === "断开") {
                disconnect();
            } else {
                var addreses = document.getElementById('address').value;

                setChatContent("开始连接!" + addreses);
                // addreses = "ws://127.0.0.1:96/api/chat?name=xjh2&to=xjh1";
                if (window.WebSocket) {
                    socket = new WebSocket(addreses);
                    //连接开启时
                    socket.onopen = function (event) {
                        setChatContent("连接开启!");

                        document.getElementById('btnconn').value = "断开"
                    };
                    //连接关闭时
                    socket.onclose = function (event) {
                        setChatContent("与服务器的连接已断开。" + event.data);

                        document.getElementById('btnconn').value = "连接"
                    };
                    //发生错误时
                    socket.onerror = function (event) {
                        setChatContent("发生错误:"+event.data);
                    };
                    //收到信息时
                    socket.onmessage = function (event) {
                        setChatContent(event.data);
                    };
                } else {
                    setChatContent("浏览器不支持 WebSocket！");
                }
            }
        };

        function setChatContent(data) {
            if (!data) {
                return;
            }
            var ta = document.getElementById('chatContent');
            ta.value = ta.value + '\n' + data
            //var Html = '<p>' + data + '</p>';
            //ta.innerHTML += Html;
        };

        function disconnect() {
            if (!window.WebSocket) {
                return;
            }
            if (socket && socket.readyState == WebSocket.OPEN) {
                socket.close();
            }
        };


        function send(message) {
            if (!window.WebSocket) {
                return;
            }
            if (socket.readyState == WebSocket.OPEN) {
                socket.send(message);
            } else {
                setChatContent("连接没有开启.");
            }
        }
    </script>
    <form onsubmit="return false;" style="width: 100%; height: 100%;">
        <h1>WebSocket聊天室</h1>
        <input type="text" id="address" value="ws://127.0.0.1:6002/" style="width: 400px" />
        <input type="button" id="btnconn" value="连接" onclick="connect()" />

        <textarea id="chatContent" style="width: 100%; height: 500px;"></textarea>
        @*<div id="chatContent" style="width: 100%; height: 100%;"></div>*@

        <hr />
        <input type="text" name="message" style="width: 300px" />
        <input type="button" value="发送消息" onclick="send(this.form.message.value)" />
        <input type="button" onclick="javascript:document.getElementById('chatContent').value=''" value="清空记录" />
    </form>
</body>
</html>